body{
    margin: 0;
    background:#7aff97;
    height: 100vh;
    position: relative;
}
.container{
    width: 232px;
    height: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 0;
}
.ball{
    width: 100px;
    height: 100px;
    border: 8px solid #000;
    display: inline-block;
    border-radius: 50%;
    background: rgb(255, 255, 255);
    position: relative;
}

.face1{
    width: 79px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 30px;
}
.face1::before{
    content: '';
    width: 18px;
    height: 8px;
    border-radius: 50%;
    background-color: pink;
    position: absolute;
    right: -8px;
    top: 20px;
}
.face1::after{
    content: '';
    width: 18px;
    height: 8px;
    border-radius: 50%;
    background-color: pink;
    position: absolute;
    left:-5px;
    top: 20px;
}
.face1 .l-eye{
    
    width: 15px;
    height: 14px;
    border-radius: 50%;
    border-bottom: 5px solid #000;
    position: absolute;
    top: -6px;
    left: 12px;
}
.face1 .r-eye{
    width: 15px;
    height: 14px;
    border-radius: 50%;
    border-bottom: 5px solid #000;
    position: absolute;
    top: -6px;
    right: 8px;
}
.face1 .mouth{
   
    width: 30px;
    height: 14px;
    border-radius: 50%;
   border-bottom: 5px solid #000;
    position: absolute;
    bottom: -4px;
    left: 24px;

}
.face2{
    width: 79px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 30px;
}
.face2::before{
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: pink;
    position: absolute;
    right: 16px;
    top: 24px;
}
.face2::after{
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: pink;
    position: absolute;
    left:-16px;
    top: 24px;
}
.face2 .l-eye{
    transform: rotate(180deg);
    width: 15px;
    height: 14px;
    border-radius: 50%;
    border-bottom: 5px solid #000;
    position: absolute;
    top: 10px;
    left: -6px;
}
.face2 .r-eye{
    transform: rotate(180deg);
    width: 15px;
    height: 14px;
    border-radius: 50%;
    border-bottom: 5px solid #000;
    position: absolute;
    top: 10px;
    right: 26px;
}
.face2 .mouth{
    width: 30px;
    height: 14px;
    border-radius: 50%;
   border-bottom: 5px solid #000;
    position: absolute;
    bottom: -8px;
    left: 10px;
}
.kiss{
    transform: rotate(90deg);
    width: 11px;
    height: 10px;
    border-radius: 50%;
    border-bottom: 5px solid #000;
    position: absolute;
    top: 20px;
    left: 12px;
    opacity: 0;
}
.kiss-b{
    top: 31px;
}
@keyframes close{
    0% {transform: translate(0);}
    20% {transform: translateX(20px);}
    35% {transform: translateX(20px);}
    55% {transform: translateX(0);}
    100% {transform: translate(0);}
}
#l-ball{
    animation: close 4s ease infinite;
    z-index: 1;
}

@keyframes face {
    0%{transform: translate(0) rotate(0);}
    10%{transform: translate(0) rotate(0);}
    20%{transform: translate(5px) rotate(-2deg);}
    28%{transform: translate(0) rotate(0);}
    35%{transform: translate(5px) rotate(-2deg);}
    50%{transform: translate(0) rotate(0);}
    100%{transform: translate(0) rotate(0);}
}
.face1{
    animation: face 4s ease infinite;
}
@keyframes kiss {
    40%{transform: translate(0);}
    50%{transform: translate(30px) rotate(20deg);}
    60%{transform: translate(-33px);}
    67%{transform: translate(-33px);}
    77%{transform: translate(0);}
}
#r-ball{
    animation: kiss 4s ease infinite;
}

@keyframes kiss-m {
    0%{opacity: 0;}
    55%{opacity: 0;}
    55.1%{opacity: 1;}
    66%{opacity: 1;}
    66.1%{opacity: 0;}
}

.kiss{
    animation: kiss-m 4s ease infinite;
}

@keyframes mouth-m{
    0%{opacity: 1;}
    55%{opacity: 1;}
    55.1%{opacity: 0;}
    66%{opacity: 0;}
    66.1%{opacity: 1;}
}
.mouth-r{
    animation: mouth-m 4s ease infinite;
}